@import "tailwindcss";
@plugin "@tailwindcss/typography";
@config "../../tailwind.config.js";

@layer base {
  html {
    scroll-behavior: smooth;
  }

  html,
  body {
    margin: 0;
    width: 100%;
    font-family: var(--font-funnel-sans);
    background-color: hsla(var(--background), 1);
    color: hsla(var(--foreground), 1);
  }

  body {
    @apply flex flex-col min-h-screen;
  }

  code,
  pre {
    font-family: var(--font-jetbrains-mono);
  }

  * {
    @apply border-border accent-accent;
  }

  *:focus-visible {
    @apply outline-none ring-2 ring-ring;
  }

  /* Custom scrollbar styles for Chromium, because the default ones inside the body are light style, which may not match the website's dark style. */
  @media (width >= 48rem) {
    /* Equivalent to `md:<class>` in Tailwind CSS */
    @supports selector(::-webkit-scrollbar) {
      body ::-webkit-scrollbar {
        @apply h-2 w-2;
      }

      body ::-webkit-scrollbar-track {
        @apply bg-background;
      }

      body ::-webkit-scrollbar-thumb {
        @apply bg-foreground/30 rounded-full;
      }

      body ::-webkit-scrollbar-thumb:hover {
        @apply bg-foreground/50;
      }
    }
  }
}

:root {
  --background: 220, 20%, 10%;
  --foreground: 0, 0%, 95%;
  --card: 220, 20%, 13%;
  --card-foreground: 0, 0%, 95%;
  --popover: 220, 20%, 13%;
  --popover-foreground: 0, 0%, 95%;
  --primary: 24, 90%, 55%;
  --primary-foreground: 0, 0%, 98%;
  --secondary: 220, 15%, 16%;
  --secondary-foreground: 0, 0%, 98%;
  --muted: 220, 20%, 18%;
  --muted-foreground: 0, 0%, 75%;
  --accent: 24, 90%, 45%;
  --accent-foreground: 0, 0%, 98%;
  --destructive: 0, 84.2%, 60.2%;
  --destructive-foreground: 0, 0%, 98%;
  --border: 220, 15%, 20%;
  --input: 220, 15%, 20%;
  --ring: 0, 0%, 95%;
  --radius: 0.5rem;
  --chart-1: 216, 100%, 57%;
  --chart-2: 0, 100%, 57%;
  --chart-3: 174, 100%, 37%;
  --chart-4: 44, 100%, 47%;
  --chart-5: 144, 100%, 37%;
}

@media (prefers-color-scheme: light) {
  :root {
    --background: 0, 0%, 100%;
    --foreground: 220, 47%, 11%;
    --card: 0, 0%, 97%;
    --card-foreground: 220, 47%, 11%;
    --popover: 220, 20%, 13%;
    --popover-foreground: 0, 0%, 95%;
    --primary: 24, 90%, 55%;
    --primary-foreground: 0, 0%, 98%;
    --secondary: 0, 0%, 92%;
    --secondary-foreground: 220, 47%, 11%;
    --muted: 0, 0%, 88%;
    --muted-foreground: 220, 20%, 45%;
    --accent: 24, 90%, 45%;
    --accent-foreground: 0, 0%, 98%;
    --destructive: 0, 84.2%, 60.2%;
    --destructive-foreground: 0, 0%, 98%;
    --border: 0, 0%, 85%;
    --input: 0, 0%, 85%;
    --ring: 220, 47%, 11%;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground shadow hover:bg-primary/90 hover:text-primary-foreground h-10 px-8 cursor-pointer;
  }

  .btn-primary {
    @apply bg-primary text-primary-foreground;
  }

  .btn-secondary {
    @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
  }

  .card {
    @apply bg-card text-card-foreground backdrop-blur-sm border border-muted/60 rounded-lg shadow-sm p-6;
  }

  .icon-badge {
    @apply bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center;
  }

  .icon-badge svg {
    @apply h-6 w-6 text-primary;
  }

  .icon-badge-large {
    @apply w-14 h-14;
  }

  .icon-badge-large svg {
    @apply h-9 w-9;
  }

  .badge {
    @apply inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm backdrop-blur-sm;
  }
}

@layer utilities {
  .container {
    margin-inline: auto;
    padding-inline: 2rem;
  }

  .card-hover {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10;
  }

  .blur-fix-performance {
    /* Utility class for fixing performance issues on Safari */
    /* Had to use CSS variables, since without them, "trasform: translate3d(0,0,0)" gets converted to "transform: translate(0)"... */
    --blur-fix-performance: 0;
    transform: translate3d(
      var(--blur-fix-performance),
      var(--blur-fix-performance),
      var(--blur-fix-performance)
    );
  }
}

.pagefind-ui {
  --pagefind-ui-scale: 0.8;
  --pagefind-ui-primary: hsla(var(--primary), 1);
  --pagefind-ui-text: hsla(var(--foreground), 1);
  --pagefind-ui-background: hsla(var(--background), 1);
  --pagefind-ui-border: hsla(var(--border), 1);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0.25rem;
  --pagefind-ui-font: var(--font-funnel-sans);

  width: 100%;
}

.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0px;
  z-index: 9999;
  padding: 1em;
  overflow-y: auto;
  box-shadow:
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border-bottom-right-radius: var(--pagefind-ui-border-radius);
  border-bottom-left-radius: var(--pagefind-ui-border-radius);
  border-color: var(--pagefind-ui-border);
  border-width: var(--pagefind-ui-border-width);
  border-style: solid;
  background-color: var(--pagefind-ui-background);
}

.pagefind-ui .pagefind-ui__result-link {
  color: var(--pagefind-ui-primary);
}

.pagefind-ui .pagefind-ui__result-excerpt {
  color: var(--pagefind-ui-text);
}

/* Hide the filter panel */
.pagefind-ui .pagefind-ui__filter-panel {
  display: none;
}

/* Ferron code syntax highlighting theme, based on Catpuccin Mocha and Catpuccin Latte themes */
.astro-code,
.astro-code span {
  color: var(--shiki-dark) !important;
  /* Don't use theme's background ("var(--shiki-dark-bg)") */
  background-color: color-mix(
    in hsl,
    hsla(var(--secondary), 1),
    hsla(var(--background), 1) 50%
  ) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

@media (prefers-color-scheme: light) {
  .astro-code,
  .astro-code span {
    color: var(--shiki-light) !important;
    /* Don't use theme's background ("var(--shiki-light-bg)") */
    background-color: color-mix(
      in hsl,
      hsla(var(--secondary), 1),
      hsla(var(--background), 1) 50%
    ) !important;
    font-style: var(--shiki-light-font-style) !important;
    font-weight: var(--shiki-light-font-weight) !important;
    text-decoration: var(--shiki-light-text-decoration) !important;
  }
}

.astro-code {
  @apply shadow-sm;
}
